import 'package:flutter/material.dart';

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  FocusNode _emailFocusNode = new FocusNode();
  FocusNode _passwordFocusNode = new FocusNode();

  GlobalKey<FormState> _signInFormKey = new GlobalKey();
  TextEditingController _usernameEditingController =
      new TextEditingController();
  TextEditingController _passwordEditingController =
      new TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Container(
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          color: Theme.of(context).primaryColor,
          child: Center(
            child: Container(
              width: MediaQuery.of(context).size.width * 0.85,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(8.0)),
                color: Colors.white,
                // image: DecorationImage
              ),
              child: Stack(
                children: <Widget>[
                  Column(
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      SizedBox(
                        height: 35.0,
                      ),
                      // Row(
                      //   mainAxisAlignment: MainAxisAlignment.center,
                      //   children: <Widget>[
                      //     Image.asset(
                      //       'assets/images/github.png',
                      //       fit: BoxFit.contain,
                      //       width: 60.0,
                      //       height: 60.0,
                      //     ),
                      //     Image.asset(
                      //       'assets/images/arrow.png',
                      //       fit: BoxFit.contain,
                      //       width: 40.0,
                      //       height: 30.0,
                      //     ),
                      //     Image.asset(
                      //       'assets/images/FlutterGo.png',
                      //       fit: BoxFit.contain,
                      //       width: 60.0,
                      //       height: 60.0,
                      //     )
                      //   ],
                      // ),
                      buildSignTextForm(),
                      buildSignInButton(),
                      SizedBox(
                        height: 15.0,
                      ),
                      Container(
                        height: 1,
                        width: MediaQuery.of(context).size.width * 0.75,
                        color: Colors.grey[400],
                        margin: const EdgeInsets.only(bottom: 10.0),
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          TextButton(
                            onPressed: () {
                              print('Github OAuth button clicked.');
                            },
                            child: Text(
                              'Github OAuth 认证',
                              style: TextStyle(
                                color: Theme.of(context).primaryColor,
                                decoration: TextDecoration.underline,
                              ),
                            ),
                          ),
                          TextButton(
                              onPressed: () {},
                              child: Text(
                                '游客登录',
                                style: TextStyle(
                                  color: Theme.of(context).primaryColor,
                                  decoration: TextDecoration.underline,
                                ),
                              ))
                        ],
                      )
                    ],
                  )
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }

  Widget buildSignTextForm() {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(8.0)),
      ),
      width: MediaQuery.of(context).size.width * 0.8,
      height: 190,
      child: Form(
        // key: _signInForKey,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Flexible(
                child: Padding(
              padding: const EdgeInsets.only(
                left: 25,
                right: 25,
                top: 20,
                bottom: 20,
              ),
              child: TextFormField(
                controller: _usernameEditingController,
                focusNode: _emailFocusNode,
                onEditingComplete: () {},
                decoration: InputDecoration(
                    icon: Icon(
                      Icons.email,
                      color: Colors.black,
                    ),
                    hintText: 'Github 登录名',
                    border: InputBorder.none),
                style: TextStyle(
                  fontSize: 16,
                  color: Colors.black,
                ),
                validator: (value) {
                  return null;
                },
                onSaved: (value) {},
              ),
            )),
            Container(
              height: 1,
              width: MediaQuery.of(context).size.width * 0.75,
              color: Colors.grey[400],
            ),
            Flexible(
              child: Padding(
                padding: const EdgeInsets.only(left: 25, right: 25, top: 20),
                child: TextFormField(
                  controller: _passwordEditingController,
                  focusNode: _passwordFocusNode,
                  decoration: InputDecoration(
                    icon: Icon(
                      Icons.lock,
                      color: Colors.black,
                    ),
                    hintText: "Github 登录密码",
                    border: InputBorder.none,
                    suffixIcon: IconButton(
                      icon: Icon(
                        Icons.remove_red_eye,
                        color: Colors.black,
                      ),
                      onPressed: () {},
                    ),
                  ),
                  obscureText: false,
                  style: TextStyle(
                    fontSize: 16,
                    color: Colors.black,
                  ),
                ),
              ),
            ),
            Container(
              height: 1,
              width: MediaQuery.of(context).size.width * 0.75,
              color: Colors.grey[400],
            )
          ],
        ),
      ),
    );
  }

  /// create button
  Widget buildSignInButton() {
    return GestureDetector(
      child: Container(
        padding: EdgeInsets.only(left: 42, right: 42, top: 10, bottom: 10),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(5.0)),
          color: Theme.of(context).primaryColor,
        ),
        child: Text(
          "LOGIN",
          style: TextStyle(fontSize: 25, color: Colors.white),
        ),
      ),
    );
  }
}
